<template>
  <div class="sys-main-content">
    <div class="col-content">
      <div class="sys-search">
      </div>
      <div v-loading="loading" class="sys-table">
        <el-row>
          <el-col :span="10">
            <el-divider content-position="left">数据库表结构</el-divider>
            <el-card>
              <el-table :data="dataBaseField" :row-style="rowstyle" height="350">
                <el-table-column label="字段名" prop="columnName" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="字段类型" prop="columnType" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="长度" prop="columnSize" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="字段描述" prop="columnComment" align="center" show-overflow-tooltip></el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-col>
              <el-select v-model="tableName" placeholder="请选择表名" @change="search">
                <el-option v-for="(item,K) in tableList" :key="K" :label="item" :value="item" />
              </el-select>
            </el-col>
            <el-col>
              <el-alert
                :closable="false"
                :title="dataBaseField.length==entityField.length?'结构一致':'结构不一致'"
                :type="dataBaseField.length==entityField.length?'success':'error'"
              >
              </el-alert>
            </el-col>
          </el-col>
          <el-col :span="10">
            <el-divider content-position="left">实体结构</el-divider>
            <el-card>
              <el-table :data="entityField" :row-style="rowstyle" height="350">
                <el-table-column label="字段名" prop="columnName" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="字段类型" prop="columnType" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="字段描述" prop="columnComment" align="center" show-overflow-tooltip></el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllTableNameList, getTableDetailsByName } from '@/api/deploy.js'
export default {
  name: 'SourceIndex',
  data() {
    return {
      dataBaseField: [],
      entityField: [],
      tableList: [],
      tableName: '',
      loading: true
    }
  },
  created() {
    this.init(undefined)
  },
  methods: {
    rowstyle({ row, rowIndex }) {
      console.log(row, rowIndex)
      const stylejson = {}
      if (row.status === 1) {
        stylejson.background = '#F08080'
        stylejson.color = 'black'
        return stylejson
      } else {
        return ''
      }
    },
    search() {
      if (this.tableName !== '') {
        this.init(this.tableName)
      } else {
        this.$message.error('请选择表名再进行查询')
      }
    },
    init(name) {
      getAllTableNameList().then((r) => {
        this.tableList = r
        if (name) {
          this.queryTableDetail(name)
        } else {
          if (this.tableList.length !== 0) {
            this.queryTableDetail(this.tableList[0])
            this.tableName = this.tableList[0]
          }
        }
      }).catch(() => {
        this.loading = false
      })
    },
    queryTableDetail(name) {
      this.loading = true
      getTableDetailsByName(name).then((r) => {
        this.dataBaseField = r.dataBaseField
        this.entityField = r.entityField
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
